<template  >
    <div class="white-module module" v-loading="loading">

      <div class="title"><span></span>参赛信息</div>
      <div class="info">
        <div class="item">
         <div class="o"> <span>参与代表队</span>{{teaminfo.team_name}}</div>
        </div>
        <div class="item">
          <div class="o">  <span>领队</span>{{teaminfo.real_name}}</div>
        </div>



      </div>

      <div class="title"><span></span>赛事信息</div>
      <div class="info">
        <div class="item">
         <div class="o"> <span>参与赛事</span>{{matchInfo.matchName}}</div>

            <span class="last" v-if="record.typename!=='个人赛'">参赛队伍</span>
            <el-input v-if="record.status==9&&record.typename!=='个人赛'&&type=='rise'" v-model="record.team_name" style="width: 120px"></el-input>
            <label v-else-if="record.typename!=='个人赛'">{{record.team_name}}</label>

        </div>
        <div class="item">
          <div class="o">  <span>参与赛项</span>{{record.item_name}}</div><span class="last"
            >指导老师</span
          >{{record.zdlsStr}}
        </div>
        <div class="item">
          <div class="o"> <span>参赛组别</span>{{record.group_name}}</div><span class="last"
            >比赛时间</span
          >{{matchInfo.matchDate}}
        </div>

        <div class="item">
          <div class="o">  <span>参赛选手</span>
            <el-checkbox-group v-model="checkList" v-if="record.status==9 && type=='rise' && record.typename!=='个人赛'">

            <div v-for="user in users">
              <el-checkbox  :label="user.code" :key="user.code">{{user.name}}</el-checkbox>
            </div>

          </el-checkbox-group>
            <label v-else>{{record.real_name}}</label>
          </div>
          <span class="last"
            >报名时间</span
          >{{record.create_date}}
        </div>
      </div>

      <!--此处注意：晋级和详情用的同一个页面-->
      <!--只有国赛、或者省赛晋级这两种情况显示报名表-->
      <div class="title" v-if="matchInfo.matchLevel=='1'"><span></span>赛项报名表</div>
      <div class="info" v-if="matchInfo.matchLevel=='1'">

        <div class="item" style="margin-left: 100px">
          <el-upload
              class="avatar-uploader"
              :action="baseUrl+'/front/upload'"
              :show-file-list="false"
              :on-success="handleAvatarSuccess2"
              :before-upload="beforeAvatarUpload2"
          >
            <label v-if="!record.rise_file&& type=='rise'" style="color: red;">*</label>
            <div class="image image1">
              <img v-if="record.rise_file" :src="record.rise_file_show" class="img" />
              <div v-else-if="type=='rise'" class="upload ">
                <img src="@/assets/common/upload.png">
                <div class="text">赛项报名表</div>
              </div>
            </div>
            <!--
            <div class="hint">参赛人员名单 <a target="_blank" style="text-decoration:underline;color: #00a0e9;" @click.stop="downLoad1()">下载</a></div>
            -->
          </el-upload>
        </div>
      </div>


      <div class="title" v-if="matchInfo.matchLevel=='1'  && record.is_promiss==1"><span></span>参赛承诺书</div>
      <div class="info" v-if="matchInfo.matchLevel=='1' && record.is_promiss==1">
        <div class="item" style="margin-left: 100px">
          <el-upload
              class="avatar-uploader"
              :action="baseUrl+'/front/upload'"
              :show-file-list="false"
              :on-success="handleAvatarSuccess3"
              :before-upload="beforeAvatarUpload3"
          >
            <label v-if="!record.promiss_file&& type=='rise'" style="color: red;">*</label>
            <div class="image image1">
              <img v-if="record.promiss_file" :src="record.promiss_file_show" class="img" />
              <div v-else-if="type=='rise'" class="upload ">
                <img src="@/assets/common/upload.png">
                <div class="text">参赛承诺书</div>
              </div>
            </div>
          </el-upload>
        </div>
      </div>

    <div  v-if="record.status==9 && type=='rise' " class="title">
      <el-form style="margin-left: 30%">
        <el-form-item>

          <div class="btns">
            <el-button @click="back">取消</el-button>
            <el-button type="primary" @click="risehandle">
              提交
            </el-button>
          </div>
        </el-form-item>

      </el-form>

    </div>
      <!--
      <div class="hint">
          注：<div>
            赛前请关注 参赛报名 > 报名记录 > 对应赛事赛项的参赛时间信息；<br/>赛前请关注 参赛报名 > 报名记录 > 对应赛事赛项的抽签信息。
          </div>
      </div>
      -->
    </div>
  </template>

<script lang="ts" >

import {defineComponent, reactive, toRefs} from "vue";
import baseService from "@/utils/baseService";
import app from "@/constants/app";
import {ElMessage, UploadProps} from "element-plus";
import router from "@/router";

export default defineComponent({
 mounted(){
    this.id=this.$route.query.id ;
    this.type = this.$route.query.type;
    this.querySysParams();
    this.queryInfo();
  },

  data() {
    return {
      users: [{name: "", code: ""}],
      checkList: [] as any,
      loading: false,
      type: null as any,
      baseUrl: app.api,
      id: null as any,
      teaminfo: {
        real_name: "",
        team_name: ""
      },
      record: {
        create_date: '',
        rise_file: '',
        rise_file_show: '',
        promiss_file: '',
        promiss_file_show: '',
        user_ids: '',
        classname: "创意类",
        group_name: "初中组",
        teachers: "姓名7",
        item_name: "团体花样表演",
        real_name: "王莉莉、张悦悦、宋婷婷",
        id: "1655117165470240769",
        typename: "团体赛",
        team_name: "214234",
        zdlsStr: '',
        is_promiss: null as any,
      }
      ,
      matchInfo: {
        matchName: '',
        matchLevel: '',
        beginSignup: '',
        beginDate: '',
        matchDate: '',
        signupDate: '',
      },
      sysParams: {
        isReUploadFile: '',
        reUploadTimes: '',
        stopRise: '',
      },
    };
  },

  methods: {
    queryMatch(id:string){
      baseService.get('/front/spmatch/info/'+id).then(e=>{
        this.matchInfo= e.data;
      })
    },
   queryInfo(){
      if(!this.id){
        return;
      }
      baseService.get('/front/fast/match/matchRecordItem/info?myinfo=1&id='+this.id).then(e=>{
        this.record= e.data;
        this.record.rise_file_show = this.record.rise_file;
        const names = this.record.real_name.split("、")
        const ids = this.record.user_ids.split("、");
        this.users =[];
        for(let i =0;i<names.length ;i++){

          this.users.push({name:names[i],code:ids[i]});
          this.checkList.push(ids[i]);

        }

        debugger
        //获取指导老师
        const zdls = this.record.teachers.split(",");
        if(zdls.length>1){
          this.record.zdlsStr = zdls[0];
          console.log(zdls[1]);
          for(let i=0;i<zdls[0].length;i++){
            this.record.teachers = zdls[i];
          }
        }

        this.queryMatch(e.data.match_id);
        this.queryTeamInfo(e.data.team_id);
      })
    }
    //查询赛项信息
    ,queryTeamInfo(id:any){
      baseService.get("/front/fast/user/team/info?id="+id).then((e:any)=>{
        if(e.code=='0'){
          this.teaminfo = e.data;
        }
      });
    }
    ,beforeAvatarUpload2(rawFile:any) {
      if (!(rawFile.type == 'image/jpeg'||rawFile.type == 'image/png'||rawFile.type == 'image/jpg' || rawFile.type == 'application/pdf')) {
        ElMessage.error('仅支持JPG/JPEG/PNG/PDF格式!')
        return false
      } else if (rawFile.size / 1024 / 1024 > 5) {
        ElMessage.error('授权书不能超过5MB!')
        return false
      }
      return true
    },handleAvatarSuccess2 (
        response:any,
        uploadFile:any
    ){
      this.record.rise_file = response.data.src;
      this.record.rise_file_show = response.data.showSrc?response.data.showSrc:response.data.src;
      //ruleForm.empower = response.data.src;
      //imageUrl2.value = URL.createObjectURL(uploadFile.raw!)
    },downLoad1(){

      let a = document.createElement('a');
      let evt = document.createEvent('MouseEvents');
      a.download = '晋级列表';
      a.href = app.api+"/front/download?imageUrl="+this.record.rise_file;
      evt.initEvent('click',true,true);
      a.dispatchEvent(evt);
      window.URL.revokeObjectURL(a.href);
    },back(){
      router.push("/enroll/enrollList");
    },

    querySysParams() {
      baseService.get('/front/spmatch/sysParams').then(e => {
        this.sysParams = e.data;
      })
    },
    /**
     * 晋级
     * @param id
     */
    risehandle(id:any){
      if(this.sysParams.stopRise == '1') {
        ElMessage.error("报名时间已截止！");
        return;
      }

      // 赛事等级
      if(this.matchInfo.matchLevel == '1'){

        // 赛项报名表和参赛承诺书不能同时为空
        if (this.record.is_promiss == 1) {
          if (!this.record.promiss_file && !this.record.rise_file) {
            ElMessage.error("赛项报名表和参赛承诺书至少上传一项！");
            return;
          }
        }else{
          if (!this.record.rise_file) {
            ElMessage.error("请上传赛项报名表！");
            return;
          }
        }

      }

      //校验文件必须包含http
      /*if(this.record.rise_file && this.record.rise_file.indexOf("http")<0){
        ElMessage.error("请上传赛项报名表！");
        return ;
      }*/

      this.loading =true;
      console.log(this.record)
      if(!this.record.team_name || this.record.team_name == 'null'){
        this.record.team_name = '';
      }

      let params = {
        id: this.id,
        riseFile: this.record.rise_file,
        users: this.checkList.join(","),
        groupName: this.record.team_name,
        promissFile: this.record.promiss_file
      }
      baseService.get("/front/spmatchItemTeam/rise2", params).then((res:any)=>{
        this.loading =false;
        if(res.code==0){
          ElMessage.success('晋级成功');
          router.push("/enroll/enrollList");
        }else{
          ElMessage.error(res.msg);
        }
      })
    },


    /**
     * 参赛承诺书上传
     * @param rawFile
     */
    beforeAvatarUpload3(rawFile: any) {
      if (!(rawFile.type == 'image/jpeg' || rawFile.type == 'image/png' || rawFile.type == 'image/jpg' || rawFile.type == 'pdf/pdf')) {
        //ElMessage.error('仅支持JPG/JPEG/PNG/PDF格式!')
        //return false
      } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error('文件超过2MB!')
        return false
      }
      return true
    },

    /**
     * 参赛承诺书上传成功
     * @param response
     * @param uploadFile
     */
    handleAvatarSuccess3(
        response: any,
        uploadFile: any
    ) {
      this.record.promiss_file = response.data.src;
      this.record.promiss_file_show = response.data.showSrc ? response.data.showSrc : response.data.src;
    },

    /**
     * 下载参赛承诺书
     */
    downLoad3() {
      window.open(this.record.promiss_file);
      return;
      let a = document.createElement('a');
      let evt = document.createEvent('MouseEvents');
      a.download = '晋级列表';
      a.href = app.api + "/front/download?imageUrl=" + this.record.promiss_file;
      evt.initEvent('click', true, true);
      a.dispatchEvent(evt);
      window.URL.revokeObjectURL(a.href);
    },


  }
});
</script>

<style lang="scss" scoped>
.img{
  width: 100px;

}
.module {
  padding: 20px 0px 50px;
  margin-bottom: 12px;
  position: relative;

  .title {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: $font-weight-bold;
    padding: 0px 24px;

    span {
      width: 4px;
      height: 12px;
      background: #00a0e9;
      margin-right: 7px;
    }
  }


  .info {
    margin-bottom: 34px;
    padding-top: 1px;
    margin-top: 4px;

    .item {
      display: flex;
      align-items: center;
      margin-top: 8px;
      color: #4f5a70;

      .o {
        width: 400px;
        display: flex;
      }

      span {
        width: 78px;
        margin-left: 35px;
        text-align: right;
        margin-right: 20px;
      }
    }
  }


  .hint {
    width: 740px;
    margin: 54px 0px 20px;
    color: #959CA9;
    font-size: 12px;
    display: flex;
    line-height: 17px;
    justify-content: flex-end;
  }

}
</style>
